<template>
  <div class="wrap">
    <div class="myheader">
      <div class="header">
        <div class="logo">
          <img src="@/assets/logo.png" alt="">
        </div>
        <div @click=" gologin()">返回登錄</div>
      </div>
    </div>
    <div class="main">
      <div class="login">
        <div class="others">
          <div class="hello">重置密碼</div>
        </div>
        <div class="ding">
          <div class="dingtop">
            <div>1</div>
            <div></div>
            <div>2</div>
            <div></div>
            <div>3</div>
          </div>
          <div class="dingbottom">
            <div>手機驗證碼</div>
            <div>密碼重置</div>
            <div>重置成功</div>
          </div>
        </div>
        <div class="tops">
          <div class="new">手機號碼:</div>
          <!-- <select name="" v-model="loginForm.areaCode">
            <option value="" >請選擇</option>
            <option v-for="(item,index) in list" :key="index" :value="item.code" :label='item.label'></option>
          </select> -->

          <el-select v-model="loginForm.areaCode" class="sele" filterable clearable  >
  
              <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.code" class="seletu">
                <!-- <img v-if="index == 1" src="./../../assets/china.png" style="width:40px">
                <img v-if="index == 0" src="./../../assets/china3.png" style="width:40px">
                <img v-if="index == 2" src="./../../assets/china2.png" style="width:40px">
                <img v-if="index == 3" src="./../../assets/china1.png" style="width:40px"> -->
                <span>{{ item.label }}</span>
              </el-option>
            </el-select>
          <div class="phoness">
            <input
              class="input-user"
              v-model="loginForm.mobile"
              placeholder="請輸入手機號碼"
              maxlength="16"
              type="text"
              autocomplete="off"
            />
          </div>
        </div>
        <div class="tops">
          <div class="news">短信驗證碼：</div>
          <div class="phone">
            <input
              class="input-user"
              v-model="loginForm.identifyingCode"
              placeholder="請輸入短信驗證碼"
              maxlength="16"
              type="text"
              autocomplete="off"
            />
          </div>
          <!-- <div class="get" @click="codetap()">獲取驗證碼</div> -->
          <div class="get" v-show="countshow" @click="codetap()">獲取驗證碼</div>
          <div class="get" v-show="!countshow">{{count}} s</div>
        </div>
        <div class="submit">
          <div @click="getuser()">下—步</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
import {checkCode,getAreaCode,sendCode} from '@/api/login';
export default {
  name: 'regist',
  data () {
    return {
      list:[],
      time:null,
      countshow: true,
      count: '60',
      value1: '',
      loginForm: {
        areaCode:'',
        identifyingCode:'',
        mobile:'',
      },
    }
  },
  mounted(){
    this.getcourse()
  },
  methods: {
    getuser(){
      if(this.loginForm.sho_cate_name ==''){
        this.$message('請選擇區號');
      }else if(this.loginForm.identifyingCode==''){
        this.$message('請輸入驗證碼');
      }else{
    // console.log(this.loginForm.sho_cate_name.split('+')[1])
      checkCode({identifyingCode:this.loginForm.identifyingCode,mobile:this.loginForm.mobile}).then(response => {
        if (response.errno == 0) {
          this.$router.replace({ path: '/forgetone', query:{mobile:this.loginForm.mobile}},)
          }else{
            if(response.errno == -1){
                
                  this.$message({
            type: 'error',
                 message: '驗證碼錯誤'
          })
            }else{
          this.$message({
            type: 'error',
            message: response.errmsg
          })
          }
        }
      })
      .catch(failResponse => {})
      }
    },
    codetap(){
      var that = this
      if(this.loginForm.areaCode ==''){
        this.$message('請選擇區號');
      }else{
        if(this.time)return
        sendCode({ tel:this.loginForm.mobile,areaCode:this.loginForm.areaCode.split('+')[1],type: 2}).then(response => {
          if(response.errno == 0){
            this.countshow = false
              if(!this.time){
                this.time = setInterval(function(){
                      that.count = that.count - 1
                      if(that.count == 0){
                        clearInterval(that.time)
                        that.count = 60
                        that.countshow = true
                        that.time = null;
                        // that.loginForm.identifyingCode = ''
                      }
                  }, 1000)
              }
            this.$message({
              type: 'success',
              message: "發送成功"
            })
          }else if(response.errno == -1){
              this.$message({
                type: 'error',
                message: response.errmsg
              })
            }else{
              this.$message({
                type: 'error',
                message: "系統錯誤"
              })
            }
          
        })
      }
    },
    getcourse(){
      getAreaCode({userId:0}).then(response => {
        if(response.errno == 0) {
          var array = []
          for(var i = 0;i<response.data.length;i++){
            response.data[i].label = response.data[i].area+'+'+response.data[i].code
            // this.code = response.data[i].code.split('+')[2]
            array.push(response.data[i])
          }
          this.list = array
        }
      })
      .catch(failResponse => {})
    },
    goforget(){
      this.$router.push({path:'/forget'})
    },
    gohome(){
      this.$router.push({path:'/home',query:{sta:1}})
    },
    goregist(){
      this.$router.push({path:'/regist'})
    },
    gologin(){
      this.$router.push({path:'/login'})
    }
  }
}
</script>
<style type="text/css" scoped>
.myheader{
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  background: #fff;
}
.header{

  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  margin-top: 15px;
  margin-bottom:15px;
      width: 82%;
    
    background: #be795a;
    color: #fff;
    padding: 0 33px;
}
.wrap{
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  background-color: #fff;
}
.logo img{
  width: 191px;
}
.hello{
  height: 42px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 42px;
}
.others{
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding-top:39px;
  padding-left:30PX;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
} 
  .main { 
    width: 100%;
    margin-top:10px;
    justify-content: space-around;
    background-color: #fff;
  }
  .login{
    width: 1573px;
    height: 711px;
    background: #FFFFFF;
    border: 1px solid #999999;
    margin: 0 auto;
    align-items: center;
  }
  .login_parent {
    width: 40%;
    margin: 0 auto;
    background: #fff;
    color:rgba(0, 0, 0, 0.5);
    background-size: cover;
    border-radius: 15px;
  }
  .phone{
    width: 80%;
    height: 50px;
    line-height: 50px;
    padding:0 10px;
    margin: 0 auto;
    color: #000;
    border:2px solid #666666;
  }
  .input{
      background: none !important;
  }
  .phone div{
    font-size: 25px;
    padding-left:2px;
  }
  
  .phoness{
    width: 53%;
    padding:0 10px;
    height: 48px;
    color: #000;
    border:2px solid #666666;
  }
  .new{
    width: 23%;  
    padding-right:4%;
    text-align: right;  
    height: 48px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 48px;
  }

  .news{
    width: 25%;  
    padding-right:2%;
    text-align: right;  
    height: 48px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 48px;
  }
  .top{
    width: 86%;
    justify-content: space-between;
    display: flex;
    margin: 0 auto;
    margin-bottom:40px;
    margin-top:40px;
  }

  .tops{
    position: relative;
    width: 500px;
    display: flex;
    margin: 0 auto;
    margin-bottom:40px;
    margin-top:40px;
  }
  .input-user {
    border: none;
    outline: none;
    color: #000;
    font-size: 18px;
    background: #fff !important;
    height: 45px;
    display: flex;
    align-items: center;
  }
  select{
    border-right: none; 
    outline: none;
    width: 121px;
    height: 52px;
    font-size: 16px;
    text-align: center;
    padding-left:10px;
    border-left:2px solid #666666;
    border-top:2px solid #666666;
    border-bottom:2px solid #666666;
  }
  .sele{
    border-right: none; 
    outline: none;
    width: 30%;
    font-size: 18px;
    text-align: center;
    border-left:2px solid #666666;
    border-top:2px solid #666666;
    border-bottom:2px solid #666666;
  }
  .wrap>>>.el-select>.el-input{
    height: 100%;
  }
  .wrap >>> .el-input--suffix .el-input__inner{
    height: 100%;
  }
  .seletu{
    display: flex;
    margin: 5px 0;
  }
  .submit{
    width: 30%;
    padding-left:15%;
    height: 80px;
    margin: 0 auto;
    align-items: center;
    text-align: right;
    display: flex;
  }
  .submit>div:nth-child(1){
    width: 360px;
    height: 45px;
    background: #BE9A67;
    text-align: center;
    justify-content: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 45px;
}
.ding{
  width: 60%;
  margin: 0 auto;
  padding:50px 0;
}
.dingtop{
  display: flex;
  height: 52px;
  justify-content: center;
  align-items: center;
}
.dingtop>div:nth-child(1){
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  background: #BE9A67;
  border-radius: 50%;  
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}
.dingtop>div:nth-child(2){
  width: 259px;
  height: 2px;
  background: #BE9A67;
}
.dingtop>div:nth-child(3){
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border: 2px solid #DDDDDD;
  border-radius: 50%;
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #DDDDDD;
}
.dingtop>div:nth-child(4){
  width: 259px;
  height: 2px;
  background: #DDDDDD;
}
.dingtop>div:nth-child(5){
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border: 2px solid #DDDDDD;
  border-radius: 50%;
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #DDDDDD;
}
.dingbottom{
  display: flex;
  height: 52px;
  justify-content: space-around;
  align-items: center;
}
.dingbottom>div:nth-child(1){
  width: 103px;
  height: 18px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #BE9A67;
  line-height: 42px;
}
.dingbottom>div:nth-child(2){
  width: 83px;
  height: 18px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #DDDDDD;
  line-height: 42px;
}
.dingbottom>div:nth-child(3){
  width: 83px;
  height: 18px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #DDDDDD;
  line-height: 42px;
}
.get{
  position: absolute;
  right: 10px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
</style>
